<template>
  <div class="bg-blue-300 w-screen h-screen flex justify-center items-center">
    <div class="flex space-x-2">
      <div v-for="i in 3" :key="i" class="dot w-3 h-3 bg-blue-600 rounded-full"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import gsap from 'gsap'

let ctx
let animation

onMounted(() => {
  ctx = gsap.context(() => {
    animation = gsap.timeline({ repeat: -1 })
      .to('.dot', {
        y: -20,
        duration: 0.6,
        stagger: 0.2,
        ease: "elastic.out(1, 0.5)",
        repeat: 1,
        yoyo: true
      })
  })
})

onUnmounted(() => {
  ctx?.revert()
})
</script>

<style scoped>
.dot {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>